<template>
  <Modal :title="title" v-model="visible" width="920" :footer-hide="true" @on-cancel="visible = false">
    <Card>
      <div style="display: flex;align-items: center;"><p>发布者头像：</p><img :src="form.userInfo.headImgUrl" style="width: 40px;height: 40px;border-radius: 20px;" /></div>
      <Divider />
      <div>发布者：{{form.userInfo.username}}</div>
      <Divider />
      <div>
        <div>发布内容：</div>
        <p>{{form.content}}</p>
        <div style="display: flex;flex-wrap: wrap;">
          <div v-for="(item, index) in form.pics" :key="index" style="display: flex;">
            <img :src="item" alt="" style="width: 100px;height: 100px;margin-right: 10px;">
          </div>
        </div>
      </div>
      <Divider />
      <div style="display: flex;">
        <div>浏览量：{{ form.historyCount }}</div>
        <div style="margin-left: 30px;">收藏量：{{ form.likeCount }}</div>
        <div style="margin-left: 30px;">评论量：{{ form.commentCount }}</div>
      </div>
      <Divider />
      <div>发布地址：{{form.publishAddress}}</div>
    </Card>
  </Modal>
</template>

<script>
import { getPostDetail } from '@/api/new.js';
export default {
  name: 'postDetail',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    }
  },
  data() {
    return {
      visible: this.value,
      title: '',
      submitLoading: false,
      maxHeight: 510,
      form: {}
    };
  },
  methods: {
    setCurrentValue(value) {
      // console.log(this.form)
      console.log(value)
      // console.log(data)
      if (value === this.visible) {
        return;
      }
      this.title = '查看评论';
      // 回显
      getPostDetail({ postId: this.data.id }).then(res => {
        if (res.code === 200) {
          this.form = res.data;
          this.visible = value;
        }
      })
    }
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit('input', value);
      console.log(value, '????')
    }
  },
  mounted() {
    // this.init();
  }
};
</script>

<style lang="less">
@import '../../../styles/drawer-common.less';
</style>
